<!doctype html>
<html lang="zh-CN">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta charset="utf-8" />
    <title>部门列表</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- bootstrap & fontawesome -->
    <link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->
    <!-- text fonts -->
    <link rel="stylesheet" href="/bower_components/font-awesome/css/google-fonts.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="/common/css/ace.min.css" />
    <!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-part2.min.css"/>
<![endif]-->
    <link rel="stylesheet" href="/common/css/ace-skins.min.css" />
    <link rel="stylesheet" href="/common/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="/common/css/jquery.gritter.css" />
    <link rel="stylesheet" href="/common/css/jquery-ui.min.css" />
    <link rel="stylesheet" href="/common/css/chosen.css" />
    <!--[if lte IE 9]>
<link rel="stylesheet" href="/assets/css/ace-ie.min.css"/>
<![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="/common/js/ace-extra.min.js"></script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lte IE 8]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->

    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <script src="/bower_components/jquery-ui/jquery-ui.min.js"></script>
    <script src="/common/js/jquery.gritter.min.js"></script>
    <!-- 便捷提醒小插件 -->
    <script src="/common/js/chosen.jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/mustache.js/2.2.1/mustache.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="/pages/mock/simulation.js"></script>
    <script type="text/javascript">
        // 展示提示信息
        function showMessage(title, msg, isSuccess) {
            if (!isSuccess) {
                msg = msg || '';
            } else {
                msg = msg || '操作成功'
            }
            $.gritter.add({
                title: title,
                text: msg != '' ? msg : "服务器处理异常, 建议刷新页面来保证数据是最新的",
                time: '',
                class_name: (isSuccess ? 'gritter-success' : 'gritter-warning') + (!$('#gritter-light').get(0).checked ? ' gritter-light' : '')
            });
        }
    </script>
</head>

<body>

    <div class="page-header">
        <h1>
            用户管理
            <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            维护部门与用户关系
        </small>
        </h1>
    </div>
    <div class="main-content-inner">
        <div class="col-sm-3">
            <div class="table-header">
                部门列表&nbsp;&nbsp;
                <a class="green" href="#">
                <i class="ace-icon fa fa-plus-circle orange bigger-130 dept-add"></i>
            </a>
            </div>
            <div id="deptList">
            </div>
        </div>
    </div>


<script id="deptListTemplate" type="x-tmpl-mustache">
    <ol class="dd-list">
        {{#deptList}}
            <li class="dd-item dd2-item dept-name" id="dept_{{id}}" href="javascript:void(0)" data-id="{{id}}">
                <div class="dd2-content" style="cursor:pointer;">
                    {{name}}
                    <span style="float:right;">
                        <a class="green dept-edit" href="#" data-id="{{id}}">
                            <i class="ace-icon fa fa-pencil bigger-100"></i>
                        </a>
                        &nbsp;
                        <a class="red dept-delete" href="#" data-id="{{id}}" data-name="{{name}}">
                            <i class="ace-icon fa fa-trash-o bigger-100"></i>
                        </a>
                    </span>
                </div>
            </li>
        {{/deptList}}
    </ol>
</script>
<script type="application/javascript">
    $(function(){
        var deptList;//存储树形部门
        var deptMap = {}; //存储map格式的部门信息,为后续点击编辑按钮，填充框内的内容的时候用
        var optionStr = "";

        var lastClickDeptId = -1;  //用来存储上次点击的部门id

        var deptListTemplate = $('#deptListTemplate').html();
        Mustache.parse(deptListTemplate);

        loadDeptTree();
        
        function loadDeptTree(){
           $.ajax({
               url: "http://127.0.0.1:9000/sys/dept/tree",
               dataType:'json',
               success: function (result) {
                   if(result.ret){
                       deptList = result.data;
                       var rendered = Mustache.render(deptListTemplate,{deptList: result.data});
                       $("#deptList").html(rendered);
                       recursiveRenderDept(result.data);
                   }else{
                       showMessage("加载部门列表",result.msg,false);
                   }
               }
           }) 
        }

        //递归渲染部门树
        function recursiveRenderDept(deptList){
            if(deptList && deptList.length > 0){
                $(deptList).each(function (i, dept){
                    deptMap[dept.id] = dept;
                    if(dept.deptList.length > 0){
                        var rendered = Mustache.render(deptListTemplate,{deptList: dept.deptList});
                        $("#dept_" + dept.id).append(rendered);
                        recursiveRenderDept(dept.deptList);
                    }
                })
            }
        }
    })
</script>
</body>
</html>